<template>
    <view class="pub_page pub_page_bg pub_crystal_order pub_header_padding">
        <pub-head headerName="crystal_order" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box">
            <div class="tab_div">
                <div class="tab" :class="openType == '' ? 'tab_active' : ''" @click="openTypeClick('')">全部</div>
                <div class="tab" :class="openType == 1 ? 'tab_active' : ''" @click="openTypeClick(1)">待发货</div>
                <div class="tab" :class="openType == 2 ? 'tab_active' : ''" @click="openTypeClick(2)">待收货</div>
                <div class="tab" :class="openType == 3 ? 'tab_active' : ''" @click="openTypeClick(3)">已完成</div>
            </div>
            <z-paging ref="Zpaging" class="lis_div" v-model="list" @query="getList" :refresher-enabled="false"
                :fixed="false">
                <div class="li" v-for="(li, key) in list" :key="key">
                    <pub-image class="img" :src="li.buyInfo.skuImage || li.buyInfo.coverImg"></pub-image>
                    <div class="status">{{ getOrderStatusTxt(li) }}</div>
                    <div class="good_info">
                        <div class="title">{{ li.buyInfo.goodsName }}</div>
                        <div class="p_1">规格：{{ li.buyInfo.skuName }}</div>
                        <div class="p_2"><span class="span_1">{{ li.buyInfo.sellPrice }}</span>金币 <span
                                class="span_2">×{{
                                li.buyNum
                                }}</span></div>
                        <div class="p_3">合计：<span class="span_1">{{ li.totalPrice }}</span>金币</div>
                    </div>
                    <div class="other_info">
                        <div class="p_1">订单编号： <span class="span">{{ li.orderNumber }}</span> <span class="span_1"
                                @click="$comFun.toCopy(li.orderNumber)">复制</span></div>
                        <div class="p_1">下单时间：{{ li.createTime }}</div>
                        <div class="p_1">收货信息：{{ li.receiverName }}&nbsp;&nbsp;{{
                            $comFun.replaceMobile(li.receiverPhone) }}
                        </div>
                        <div class="p_1">收货地址：{{ li.receiverProvince }}{{ li.receiverCity }}{{ li.receiverRegion }}{{
                            li.receiverDetailAddress }}</div>
                        <div class="p_1" v-if="li.wlCompany && li.postId">物流信息：{{ li.wlCompany }}&nbsp;&nbsp;{{
                            li.postId }}
                            <span class="span_1" @click="$comFun.toCopy(li.postId)">复制</span>
                        </div>
                    </div>
                    <div class="btns" v-if="li.orderStatus > 1 && !li.wlCompany">
                        <div class="btn" @click="listDeal('to_logistics', li, key)">查看物流</div>
                    </div>
                    <div class="btns" v-if="li.isUrge == 1">
                        <div class="btn" @click="listDeal('to_urge', li, key)">催发货</div>
                    </div>
                </div>
            </z-paging>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '订单列表',//标题栏内容
                left_type: 3,
            },
            openType: '',//''全部，1待发货 2待收货  3已完成
            list: [],
        };
    },
    onLoad(option) {
        this.openType = option.openType || '';
        setTimeout(() => {
            this.$comFun.openLoading();
            this.$refs.Zpaging.reload()
        }, 400);
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    methods: {
        openTypeClick(val) {
            if (val != -1) {
                this.openType = val;
                this.$comFun.openLoading();
            }
            this.$refs.Zpaging.reload();
        },
        getOrderStatusTxt(info) {
            let arr = ['待付款', '已付款', '已发货', '订单完成', '已评价', '订单取消', '订单退款'];
            return arr[info.orderStatus]
        },
        async getList(pageNo, pageSize) {
            const res = await this.$request.get('order/getOrderPage', {
                pageNo: pageNo,
                pageSize: pageSize,
                status: this.openType
            });
            this.$comFun.closeLoading();
            // console.log(res);
            if (res.code == 200) {
                res.result.records.forEach(li => {
                    li.isUrge = 0;//是否催发货
                    if (li.orderStatus == 1 && (new Date().getTime() - new Date(li.createTime).getTime()) > 172800000) {
                        li.isUrge = 1;
                    }
                })
                this.$refs.Zpaging.complete(res.result.records);
            } else {
                this.$refs.Zpaging.complete(false);
            }
        },
        async listDeal(type, info, key) {
            switch (type) {
                case 'to_logistics':
                    this.$comFun.openLoading();
                    const res_1 = await this.$request.get('order/getLogistic', {
                        orderSn: info.orderNumber,
                        sku: info.goodsId
                    });
                    this.$comFun.closeLoading();
                    if (res_1.code == 200 && res_1.result) {
                        this.list[key].wlCompany = res_1.result.wlCompany;
                        this.list[key].postId = res_1.result.postId;
                    } else {
                        this.$comFun.toast('暂未查询到物流信息');
                    }
                    break;
                case 'to_urge':
                    this.$comFun.openLoading();
                    const res_2 = await this.$request.get('order/expediting', {
                        orderSn: info.orderNumber,
                        sku: info.goodsId
                    });
                    this.$comFun.closeLoading();
                    this.$comFun.toast(res_2.message);
                    break;
            }
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/crystal.scss";
</style>
